<template>
    <div class="search">


        <div class="tool-bar">
            <span class="search-input">
                <i><img :src="search" alt=""></i><input type="text" placeholder="BTC" v-model="searchText">
            </span>
            <span class="other-icon" @click="$router.back(-1)">
                {{option}}
            </span>
        </div>

        <div class="content">
            <div class="list-item" v-for="(l,index) in list" :key="index">
                <div class="list-nav">
                    <span>{{l.platform}}</span>
                </div>
                <div class="coin-list" v-for="(c,item) in l.son" :key="item">
                    <span class="name">{{c.title}}<span>/usdt</span></span>
                    <span class="switch">
                        <el-switch
                                v-model="c.x == 1"
                                active-color="#13ce66"
                                inactive-color="#D0D0D1"
                                @change="changestatus(c.cu_id,c.x,c.id)"
                        >
                    </el-switch>
                    </span>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
    import search from "@/assets/img/ic_search.png"
    export default {
        name: "search",
        data(){
            return {
                names:"",
                search:search,
                value:false,
                option:'取消',
                searchText:'',
                list:[]
            }
        },
        watch:{
            "searchText":function () {
                if(this.searchText.length>0){
                    this.option = "取消"
                    this.searchList()
                }
                else{
                    this.option = "取消"
                }
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            getList(){
                this.$api.home.GetPlatformCoin(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.list = res.data.data
                })
            },
            changestatus(id,x,pid){

                if(x == 1){
                    this.$api.home.HeightRemindDel(this.getCookie('token'),pid).then(res=> {
                        // 执行某些操作
                        // this.$toast({
                        //     message: res.data.msg,
                        //     duration: 1000,
                        //     forbidClick: true
                        // })
                        if(this.searchText.length>0){
                            this.searchList()
                        }else{
                            this.getList()
                        }

                    })
                }else{
                    this.$api.home.HeightRemindAdd(this.getCookie('token'),id).then(res=> {
                        // 执行某些操作
                        // this.$toast({
                        //     message: res.data.msg,
                        //     duration: 1000,
                        //     forbidClick: true
                        // })

                        if(this.searchText.length>0){
                            this.searchList()
                        }else{
                            this.getList()
                        }

                    })
                }

            },
            searchList(){
                this.$api.home.SearchCoin(this.getCookie('token'),this.searchText).then(res=> {
                    // 执行某些操作
                    this.list = res.data.data
                })
            }
        }

    }
</script>

<style scoped>
    .search{
        position: relative;
        top: 3rem;
        left: 0;
        right: 0;
    }
    .tool-bar{
        height:3rem;
        background:rgba(255,255,255,1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e7e7e7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 0 1.5rem;
    }
    .padding_lr5{
        padding: 0 0.5rem;
    }
    .tool-bar span{
        display: inline-flex;
    }
    .search-input{
        width:19.5rem;
        height:2rem;
        background:rgba(245,245,245,1);
        border:1px solid rgba(235,235,235,1);
        border-radius:1rem;
        padding-left: 2rem;
        position: relative;

    }
    .search-input i{
        position: absolute;
        left: 0.5rem;
        top: 0.4rem;
    }
    .search-input i img{
        width: 1rem;
        height: 1rem;
    }
    .search-input input{
        outline: none;
        border: none;
        background: none;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:#333;
        width: 90%;
    }
    .search-input input::placeholder{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .other-icon{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .content{
        background: #fff;
        position: absolute;
        height: fit-content;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 0;

    }
    .list-item{
        padding: 0.5rem 0;
    }
    .list-item .list-nav{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .list-item .list-nav span{
        display: flex;
        width:5rem;
        height:2rem;
        background:rgba(20,163,101,1);
        border-radius:0rem 1rem 1rem 0rem;
        justify-content: center;
        align-items: center;
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .coin-list{
        padding: 0.8rem 0;
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e7e7e7;
    }
    .coin-list .name{

        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
    }
    .coin-list .name span{
        color: #999999;
        font-size: 0.64rem;
    }
</style>